<template>
  <div class="analysis-container">
    <div class="statistics">
      <div class="statistics-item depart">
        <div class="statistics-item__left">
          <div class="statistics-item__icon depart"></div>
          <div class="statistics-item__name">对接部门</div>
        </div>
        <div class="statistics-item__value">{{ overviewData.wbjCount }}</div>
      </div>
      <div class="statistics-item topic">
        <div class="statistics-item__left">
          <div class="statistics-item__icon topic"></div>
          <div class="statistics-item__name">专题数量</div>
        </div>
        <div class="statistics-item__value">{{ overviewData.subjectCount }}</div>
      </div>
      <div class="statistics-item indicator">
        <div class="statistics-item__left">
          <div class="statistics-item__icon indicator"></div>
          <div class="statistics-item__name">指标数量</div>
        </div>
        <div class="statistics-item__value">{{ overviewData.indexCount }}</div>
        <div class="statistics-item__right">
          <div class="indicator-type">
            <div class="indicator-type__icon file"></div>
            <div class="indicator-type__name">文件</div>
            <div class="indicator-type__value">{{ overviewData.fileIndexCount }}</div>
          </div>
          <div class="indicator-type">
            <div class="indicator-type__icon database-table"></div>
            <div class="indicator-type__name">库表</div>
            <div class="indicator-type__value">{{ overviewData.tableIndexCount }}</div>
          </div>
          <div class="indicator-type">
            <div class="indicator-type__icon interface"></div>
            <div class="indicator-type__name">接口</div>
            <div class="indicator-type__value">{{ overviewData.apiIndexCount }}</div>
          </div>
          <div class="indicator-type">
            <div class="indicator-type__icon other"></div>
            <div class="indicator-type__name">其他</div>
            <div class="indicator-type__value">{{ overviewData.otherIndexCount }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-wrapper">
      <div v-for="topic in topicData" :key="topic.id" class="card" @click="handleClick(topic.id)">
        <div class="card__left">
          <div class="card__left-icon">
            <img :src="getImgSrc(topic.subjectCode)" @error="imgError" alt="" />
          </div>
          <div class="card__left-topic">{{ topic.subjectName }}</div>
        </div>
        <div class="card__right">
          <div>
            <span>对接部门:</span>
            <span>{{ topic.wbjCount }}</span>
          </div>
          <div>
            <span>指标数量:</span>
            <span>{{ topic.indexCount }}</span>
          </div>
        </div>
        <div class="card__bottom">
          <div>
            <span>文件:</span>
            <span>{{ topic.fileIndexCount }}</span>
          </div>
          <div>
            <span>库表:</span>
            <span>{{ topic.tableIndexCount }}</span>
          </div>
          <div>
            <span>接口:</span>
            <span>{{ topic.apiIndexCount }}</span>
          </div>
          <div>
            <span>其他:</span>
            <span>{{ topic.otherIndexCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <TopicListModal ref="topicListModal" />
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import TopicListModal from './components/TopicListModal.vue'

export default {
  name: 'Analysis',
  components: { TopicListModal },
  data() {
    return {
      url: {
        overview: '/index/catalogStatistic/overview',
        topic: '/index/catalogStatistic/subjectList'
      },
      overviewData: {},
      topicData: []
    }
  },
  created() {
    this.getOverviewData()
    this.getTopicData()
  },
  methods: {
    getImgSrc(subjectCode) {
      try {
        return require(`@/assets/index/topic-icons/${subjectCode}.png`)
      } catch (error) {
        return require(`@/assets/index/topic-icons/default.png`) // 返回一个默认的图片
      }
    },
    imgError(event) {
      event.target.src = require(`@/assets/index/topic-icons/default.png`) // 当图片加载失败时，设置为默认的图片
    },
    handleClick(topicId) {
      this.$refs.topicListModal.show(topicId)
    },
    async getOverviewData() {
      const res = await getAction(this.url.overview)
      if (res.success) {
        this.overviewData = res.result
      }
    },
    async getTopicData() {
      const res = await getAction(this.url.topic)
      if (res.success) {
        this.topicData = res.result
      }
    }
  }
}
</script>
<style lang="less" scoped>
.analysis-container {
  width: 100%;
  padding: 24px;
  background: #ffffff;

  .statistics {
    display: flex;

    .statistics-item {
      min-width: 260px;
      height: 83px;
      padding: 0 30px 0 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 8px;
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .statistics-item__left {
        display: flex;
        align-items: center;

        .statistics-item__icon {
          width: 48px;
          height: 48px;
          margin-right: 8px;

          &.depart {
            background-image: url('~@/assets/index/depart-icon.png');
          }
          &.topic {
            background-image: url('~@/assets/index/topic-icon.png');
          }
          &.indicator {
            background-image: url('~@/assets/index/indicator-icon.png');
          }
        }
        .statistics-item__name {
          font-size: 24px;
          font-family: PingFang-SC-Heavy, PingFang-SC;
          font-weight: 800;
          color: #ffffff;
        }
      }
      .statistics-item__value {
        font-size: 36px;
        font-family: Arial, sans-serif;
        font-weight: bold;
        color: #ffffff;
      }
      .statistics-item__right {
        display: flex;

        .indicator-type {
          min-width: 150px;
          height: 48px;
          padding: 0 12px;
          display: flex;
          align-items: center;
          background-size: 100% 100%;

          .indicator-type__icon {
            margin-right: 6px;
            width: 24px;
            height: 24px;

            &.file {
              background-image: url('~@/assets/index/file-pdf.png');
            }
            &.database-table {
              background-image: url('~@/assets/index/excel.png');
            }
            &.interface {
              background-image: url('~@/assets/index/ethernet-on.png');
            }
            &.other {
              background-image: url('~@/assets/index/more-four.png');
            }
          }
          .indicator-type__name {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
          .indicator-type__value {
            margin-left: auto;
            font-size: 28px;
            font-family: Arial, sans-serif;
            font-weight: bold;
            color: #ffffff;
          }
          &:not(:last-of-type) {
            margin-right: 12px;
          }
          &:nth-of-type(1) {
            background-image: url('~@/assets/index/file-pdf-bg.png');
          }
          &:nth-of-type(2) {
            background-image: url('~@/assets/index/excel-bg.png');
          }
          &:nth-of-type(3) {
            background-image: url('~@/assets/index/ethernet-on-bg.png');
          }
          &:nth-of-type(4) {
            background-image: url('~@/assets/index/more-four-bg.png');
          }
        }
      }
      &:not(:last-of-type) {
        margin-right: 12px;
      }
      &.depart {
        flex-grow: 315;
        background-image: url('~@/assets/index/depart-bg.png');
      }
      &.topic {
        flex-grow: 315;
        background-image: url('~@/assets/index/topic-bg.png');
      }
      &.indicator {
        flex-shrink: 0;
        flex-grow: 1150;
        background-image: url('~@/assets/index/indicator-bg.png');
      }
    }
  }

  .card-wrapper {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-auto-rows: 208px;

    .card {
      width: 100%;
      height: 100%;
      padding: 24px 26px;
      background: url('~@/assets/index/card-bg.png') no-repeat;
      background-size: 100% 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 50px 88px;
      row-gap: 17px;
      cursor: pointer;

      .card__left {
        display: flex;
        align-items: center;

        .card__left-icon {
          margin-right: 10px;
          width: 50px;
          height: 50px;

          img {
            max-width: 100%;
            height: auto;
          }
        }

        .card__left-topic {
          width: 40px;
          font-size: 20px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: bold;
          color: #333333;
          line-height: 24px;
        }
      }

      .card__right {
        align-self: center;
        justify-self: end;

        > div {
          display: flex;
          align-items: center;
          line-height: 1;

          span:first-of-type {
            font-size: 16px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: bold;
            color: #333333;
          }

          span:last-of-type {
            margin-left: 5px;
            font-size: 24px;
            font-family: Arial, sans-serif;
            font-weight: bold;
            color: #127ee8;
          }
        }
      }

      .card__bottom {
        position: relative;
        grid-column: 1 / span 2;
        background: #e8f2ff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
        border-radius: 6px;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
        place-items: center;

        > div {
          width: 100%;
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          span:first-of-type {
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: #333333;
          }

          span:last-of-type {
            font-size: 24px;
            font-family: Arial, sans-serif;
            font-weight: bold;
            color: #127ee8;
          }
        }

        &::before {
          content: '';
          position: absolute;
          width: 88px;
          height: 1px;
          background: linear-gradient(63deg, rgba(18, 126, 232, 0) 0%, #127ee8 50%, rgba(18, 126, 232, 0) 100%);
          border-radius: 6px;
          transform: rotate(90deg);
        }

        &::after {
          content: '';
          position: absolute;
          width: 314px;
          height: 1px;
          background: linear-gradient(63deg, rgba(18, 126, 232, 0) 0%, #127ee8 50%, rgba(18, 126, 232, 0) 100%);
          border-radius: 6px;
        }
      }
    }
  }
}
</style>
